<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../js/flexible.debug.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../css/faxian.css" />
		<link rel="stylesheet" type="text/css" href="../css/swiper-3.4.2.min.css" />
		<title>分类</title>
	</head>

	<body>
		<!--头部-->
		<header class="header">
			<input type="text" placeholder="搜索商品" />
		</header>
		<!--tab-->
		<div class="lists">
			<section class="box">
				<div class="swiper-container-list banner">
					<div class="swiper-wrapper nav-list">
						<script type="text/html" id="ta">
							{{each a.data.tab1 v i}}
							<div class="swiper-slide">
								<figrue class="Life">
									<img src="{{v.img}}" />
									<p>{{v.p}}</p>
								</figrue>
							</div>
							{{/each}}
						</script>
					</div>
				</div>
				<div class="swiper-container-opts subject-list">
					<div class="swiper-wrapper ron">
						<!--<div class="swiper-slide list_slide1">
						<div class="top"><img src="../img/tab1.png" /></div>
						<div class="tab_list">
							<figure>
								<h3>文胸睡衣</h3>
								<p>限量半价红包</p>
								<div><img src="../img/tab_list1.png" /></div>
							</figure>
							<figure></figure>
							<figure></figure>
							<figure></figure>
						</div>
						<div class="tab_bottom">
							<div class="Exhibition">
								<div class="Exhibition_img"><img src="../img/tab2.png" /></div>
								<p><span>4分钟后开抢</span></p>
							</div>
						</div>
						//////////////////////////////<ul><li><img src="img/bg-sexiangto.png"/></li><li><img src="img/bg-laba.png"/></li></ul>
						
						ul{
            position: absolute;
            .px2rem(left,10);
            .px2rem(top,100);
            li{
               .px2rem(width,80);
               .px2rem(height,80);
               background: #333333;
               border-radius: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            li:nth-child(1){
                img{
                    .px2rem(width,40);
                    .px2rem(height,40);
                    
                }
            }
            li:nth-child(2){
                .px2rem(margin-top,30);
                img{
                    .px2rem(width,40);
                    .px2rem(height,50);
                    
                }
            }
        }
						<h2 class="bt">...更多内衣品牌（26）</h2>
						
						<div class="list_of">
							<div class="list_cont">
								<div class="cont_img"><img src="../img/list_of1.png"/></div>
								<p>自选色4双 20元 抗寒-30度雪地袜</p>
								<p><span>￥29.9</span><span>￥112</span></p>
								<p><span>旗舰店</span><span>56892件已售</span></p>
							</div>
							<div class="list_cont"></div>
							<div class="list_cont"></div>
							<div class="list_cont"></div>
							<div class="list_cont"></div>
							<div class="list_cont"></div>
						</div>
						<h2 class="bts">...更多内衣品牌（26）</h2>
						
						<div class="kon"></div>
					</div>-->
						<!--nav-1-->
						<!--<div class="swiper-slide list_slide">
							<div class="swiper-container lunbo" dir="rtl">
								<div class="swiper-wrapper">
									<div class="swiper-slide"><img src="../img/da-1.png" /></div>
									<div class="swiper-slide"><img src="../img/da-1.png" /></div>
									<div class="swiper-slide"><img src="../img/da-1.png" /></div>
								</div>
								<div class="swiper-pagination naton"></div>
							</div>

							<div class="biaoti"><span>超值好货</span>/KDWIHEDFEIFJERJIG<span></span></div>
							
								<div class="swiper-container huadon1">
									<div class="swiper-wrapper">
										<div class="swiper-slide slide1">
											<div class="content2">
												<figure><img src="../img/da-2.png" /></figure>
												<p>红蜻蜓真皮皮鞋</p>
												<p><span>￥ 56</span><span>￥96</span></p>
											</div>
										</div>
										<div class="swiper-slide slide1">
											<div class="content2">
												<figure><img src="../img/da-3.png" /></figure>
												<p>红蜻蜓真皮皮鞋</p>
												<p><span>￥ 56</span><span>￥96</span></p>
											</div>
										</div>
										<div class="swiper-slide slide1">
											<div class="content2">
												<figure><img src="../img/da-4.png" /></figure>
												<p>红蜻蜓真皮皮鞋</p>
												<p><span>￥ 56</span><span>￥96</span></p>
											</div>
										</div>
										<div class="swiper-slide slide1">
											<div class="content2">
												<figure><img src="../img/da-5.png" /></figure>
												<p>红蜻蜓真皮皮鞋</p>
												<p><span>￥ 56</span><span>￥96</span></p>
											</div>
										</div>
									</div>
								</div>
								
								<div class="Major_suit">
								<figure>
									<img src="../img/da-6.png"/>
								</figure>
								<div class="swiper-container huadon2">
							        <div class="swiper-wrapper">
							        	<div class="swiper-slide slide1">
							        		<div class="content2">
							        			<figure><img src="../img/da-3.png"/></figure>
							        			<p><span>￥ 56</span><span>￥96</span></p>
							        		</div>
							        	</div>
							     		
							     		<div class="swiper-slide slide1">
							        		<div class="content2">
							        			<figure><img src="../img/da-4.png"/></figure>
							        			<p><span>￥ 56</span><span>￥96</span></p>
							        		</div>
							        	</div>
							        </div>
							    </div>
							</div>
							
							<div class="da_list">
								<div class="lit_cont">
									<figure>
										<img src="../img/da-10.png"/>
										<p>加绒加厚！可穿至零下！裂皮包退换</p>
										<p>￥133</p>
										<p><span>￥69</span><span>46971件已售</span></p>
									</figure>
								</div>
							</div>
							
						</div>-->
						
						
						<!---->

						<script type="text/html" id="op">
							{{each o v i}} {{if v.top.length ==1}}
							<div class="swiper-slide list_slide">
								{{each v.top x i}}
								<div class="top"><img src="{{x}}" /></div>
								{{/each}}
								<div class="tab_list">
									{{each v.list1 n i}}
									<figure>
										<h3>{{n.h3}}</h3>
										<p>{{n.p}}</p>
										<div><img src="{{n.img}}" /></div>
									</figure>
									{{/each}}
								</div>
								<div class="tab_bottom">
									{{each v.list2 j i}}
									<div class="Exhibition">
										<div class="Exhibition_img"><img src="{{j.img}}" /></div>
										<p><span>{{j.p}}</span></p>
									</div>
									{{/each}}
								</div>

								<h2 class="bt">...更多内衣品牌（26）</h2>

								<div class="list_of">
									{{each v.list3 l i}}
									<div class="list_cont">
										<div class="cont_img"><img src="{{l.img}}" /></div>
										<p>{{l.p1}}</p>
										<p><span>￥{{l.span1}}</span><span>￥{{l.span2}}</span></p>
										<p><span>{{l.span3}}</span><span>{{l.span4}}</span></p>
									</div>
									{{/each}}
								</div>
								<h2 class="bts">明日好货抢先看</h2>
							</div>
							{{/if}} {{if v.top.length ==0}}
							<div class="swiper-slide list_slide">

								<div class="tab_lists">
									{{each v.list1 n i}}
									<figure>
										<h3>{{n.h3}}</h3>
										<p>{{n.p}}</p>
										<div><img src="{{n.img}}" /></div>
									</figure>
									{{/each}}
								</div>
								<div class="tab_bottom">
									{{each v.list2 j i}}
									<div class="Exhibition">
										<div class="Exhibition_img"><img src="{{j.img}}" /></div>
										<p><span>{{j.p}}</span></p>
									</div>
									{{/each}}
								</div>

								<h2 class="bt">...更多内衣品牌（26）</h2>

								<div class="list_of">
									{{each v.list3 l i}}
									<div class="list_cont">
										<div class="cont_img"><img src="{{l.img}}" /></div>
										<p>{{l.p1}}</p>
										<p><span>￥{{l.span1}}</span><span>￥{{l.span2}}</span></p>
										<p><span>{{l.span3}}</span><span>{{l.span4}}</span></p>
									</div>
									{{/each}}
								</div>
								<h2 class="bts">明日好货抢先看</h2>
							</div>
							{{/if}} {{if v.top.length ==3}}
							<div class="swiper-slide list_slide">

								<div class="swiper-container lunbo" dir="rtl">
									<div class="swiper-wrapper">
										{{each v.top x i}}
										<div class="swiper-slide"><img src="{{x}}" /></div>
										{{/each}}

									</div>
									<div class="swiper-pagination naton"></div>
								</div>
								<div class="tab_list">
									{{each v.list1 n i}}
									<figure>
										<h3>{{n.h3}}</h3>
										<p>{{n.p}}</p>
										<div><img src="{{n.img}}" /></div>
									</figure>
									{{/each}}
								</div>
								<div class="tab_bottom">
									{{each v.list2 j i}}
									<div class="Exhibition">
										<div class="Exhibition_img"><img src="{{j.img}}" /></div>
										<p><span>{{j.p}}</span></p>
									</div>
									{{/each}}
								</div>

								<h2 class="bt">...更多内衣品牌（26）</h2>

								<div class="list_of">
									{{each v.list3 l i}}
									<div class="list_cont">
										<div class="cont_img"><img src="{{l.img}}" /></div>
										<p>{{l.p1}}</p>
										<p><span>￥{{l.span1}}</span><span>￥{{l.span2}}</span></p>
										<p><span>{{l.span3}}</span><span>{{l.span4}}</span></p>
									</div>
									{{/each}}
								</div>
								<h2 class="bts">明日好货抢先看</h2>
							</div>
							{{/if}} {{/each}}
						</script>

						<!---->
						<!--<div class="swiper-slide list_slide">
						
						
						<div class="tab_lists">
							<figure>
								<h3>文胸睡衣</h3>
								<p>限量半价红包</p>
								<div><img src="../img/tab_list1.png" /></div>
							</figure>
							<figure></figure>
							<figure></figure>
							<figure></figure>
						</div>
						<div class="tab_bottom">
							<div class="Exhibition">
								<div class="Exhibition_img"><img src="../img/tab2.png" /></div>
								<p><span>4分钟后开抢</span></p>
							</div>
						</div>
						
						<h2 class="bt">...更多内衣品牌（26）</h2>
						
						<div class="list_of">
							<div class="list_cont">
								<div class="cont_img"><img src="../img/list_of1.png"/></div>
								<p>自选色4双 20元 抗寒-30度雪地袜</p>
								<p><span>￥29.9</span><span>￥112</span></p>
								<p><span>旗舰店</span><span>56892件已售</span></p>
							</div>
							<div class="list_cont"></div>
							<div class="list_cont"></div>
							<div class="list_cont"></div>
							<div class="list_cont"></div>
							<div class="list_cont"></div>
						</div>
						<h2 class="bts">...更多内衣品牌（26）</h2>
						
						<div class="kon"></div>
					</div>-->
						<!---->
						<!--<div class="swiper-slide list_slide1">
						
						
							<div class="swiper-container lunbo" dir="rtl">
								<div class="swiper-wrapper">
									<div class="swiper-slide"><img src="../img/tab1.png" /></div>
									<div class="swiper-slide"><img src="../img/tab1.png" /></div>
									<div class="swiper-slide"><img src="../img/tab1.png" /></div>
								</div>
								<div class="swiper-pagination naton"></div>
							</div>
						<div class="tab_lists">
							<figure>
								<h3>文胸睡衣</h3>
								<p>限量半价红包</p>
								<div><img src="../img/tab_list1.png" /></div>
							</figure>
							<figure></figure>
							<figure></figure>
							<figure></figure>
						</div>
						<div class="tab_bottom">
							<div class="Exhibition">
								<div class="Exhibition_img"><img src="../img/tab2.png" /></div>
								<p><span>4分钟后开抢</span></p>
							</div>
						</div>
						
						<h2 class="bt">...更多内衣品牌（26）</h2>
						
						<div class="list_of">
							<div class="list_cont">
								<div class="cont_img"><img src="../img/list_of1.png"/></div>
								<p>自选色4双 20元 抗寒-30度雪地袜</p>
								<p><span>￥29.9</span><span>￥112</span></p>
								<p><span>旗舰店</span><span>56892件已售</span></p>
							</div>
							<div class="list_cont"></div>
							<div class="list_cont"></div>
							<div class="list_cont"></div>
							<div class="list_cont"></div>
							<div class="list_cont"></div>
						</div>
						<h2 class="bts">...更多内衣品牌（26）</h2>
						
						<div class="kon"></div>
					</div>-->

						<!--<div class="swiper-slide list_slide2">
					<script type="text/html" id="op">
					{{each o.data.tab2 v i}}
						<p>{{v.img}}</p>
						{{/each}}
					</script>
					</div>-->

					</div>
				</div>
			</section>
		</div>
		<!--空-->
		<div class="kon"></div>
		<!--底部-->
		<footer class="footer">
			<figrue class="Selected">
				<img src="../img/fooger_1.png" />
				<p>精选</p>
			</figrue>
			<figrue class="classification">
				<img src="../img/fooger_2.png" />
				<p class="actives">分类</p>
			</figrue>
			<figrue class="faxian">
				<img src="../img/fooger_3.png" />
				<p>发现</p>
			</figrue>
			<figrue class="My">
				<img src="../img/fooger_4.png" />
				<p>我的</p>
			</figrue>
		</footer>

		<script src="../js/jquery-3.2.1.js"></script>
		<script src="../js/swiper-3.4.2.jquery.min.js"></script>
		<script src="../js/template-web.js"></script>
		<script>
			$('.Selected').click(function() {
				location.href = "../index.html"
			})
			$('.classification').click(function() {
				location.href = "../html/faxian.html"
			})
			$('.faxian').click(function() {
				location.href = "../html/find.html"
			})
			$('.My').click(function() {
				location.href = "../html/Login_page.html"
			})

			$.ajax({
				type: "get",
				url: "../json/tab.json",
				success: function(data) {
					var str = template("ta", {
						a: data
					})
					$('.nav-list').html(str)
					$('.nav-list').children().eq(0).addClass('active')
					var Swiper_active1 = $('.swiper-container-list .active'),
						Swiper_slide1 = $('.swiper-container-list .swiper-slide');
					var _mySwiperlist = new Swiper('.swiper-container-list', {
						watchSlidesProgress: true,
						watchSlidesVisibility: true,
						slidesPerView: 6,
					})
				}

			});

			$.ajax({
				type: "get",
				url: "../json/tab.json",
				success: function(data) {
					console.log(data)
					var str = template("op", {
						o: data.data.list_cont1
					})
					$('.ron').html(str)
					var Swiper_active1 = $('.swiper-container-list .active'),
						Swiper_slide1 = $('.swiper-container-list .swiper-slide');
					var _mySwiperlist = new Swiper('.swiper-container-list', {
						watchSlidesProgress: true,
						watchSlidesVisibility: true,
						slidesPerView: 6,
						onTap: function() {
							_mySwiperopts.slideTo(_mySwiperlist.clickedIndex)
						}
					})
					var _mySwiperopts = new Swiper('.swiper-container-opts', {
						onSlideChangeStart: function() {
							updateNavPosition(Swiper_active1, Swiper_slide1, _mySwiperopts, _mySwiperlist)
						}
					})

					function updateNavPosition(Swiper_active, Swiper_slide, mySwiper, mySwiper_list) {
						Swiper_active.removeClass('active')
						var activeNav = Swiper_slide.eq(mySwiper.activeIndex).addClass('active');
						activeNav.siblings().removeClass("active");
						if(!activeNav.hasClass('swiper-slide-visible')) {
							if(activeNav.index() > mySwiper_list.activeIndex) {
								var thumbsPerNav = Math.floor(mySwiper_list.width / activeNav.width()) - 1
								mySwiper_list.slideTo(activeNav.index() - thumbsPerNav)
							} else {
								mySwiper_list.slideTo(activeNav.index())
							}
						}
					}
					var swiper = new Swiper('.lunbo', {
						pagination: '.naton',
						paginationClickable: true,
						loop: true,
						autoplay: 2500
					});
				}
			});
		</script>
	</body>

</html>